<template>
    <!-- <div :id="id" class="chart-box"></div> -->
    <div ref="chartRef" class="chart"></div>
    <!-- <el-empty description="描述文字"></el-empty> -->
</template>

<script>
import optionsMap from './options.js';
import themeMap from './theme/themeMap.json';

export default {
    name: 'Chart',
    props: {
        // 用于生成echarts的domid，唯一
        id: {
            type: String,
        },
        config: {
            type: Object,
        },
    },
    watch: {
        config: {
            handler(config) {
                // console.log('config:', config);
                if (config) {
                    this.clear();
                    this.drawDiyChart(config);
                }
            },
            deep: true,
            immediate: true,
        },
    },
    data() {
        return {
            chart: null, // 用于储存生成的echarts实例
        };
    },
    mounted() {},
    beforeUnmount() {
        this.clear(); // 组件卸载前主动清除图表，防止内存泄漏
    },
    methods: {
        clear() {
            if (this.chart) {
                this.chart.clear();
            }
        },
        // 自定义图表
        drawDiyChart(data) {
            // 基于准备好的dom，初始化echarts实例
            this.$nextTick(() => {
                // const Dom = document.getElementById(this.id);
                const Dom = this.$refs.chartRef;
                // console.log(Dom);
                let myChart = this.echarts.init(Dom);
                // 绘制图表
                // const option = this.makeOption(data);
                // console.log('OPtion:', Dom, data);
                myChart.setOption(data);
                this.chart = myChart;
                window.addEventListener('resize', () => {
                    this.chart.resize();
                });
            });
        },
        // 图表处理函数，入参config参考第6行注释
        drawChart(config) {
            this.$nextTick(() => {
                const { theme, chartType } = config;
                // id、chartType为必填项，注意：id需要props传递
                if (!this.id && !chartType) return this.$message.error('echarts缺少必要参数！');

                const Dom = document.getElementById(this.id);
                // 如果主题存在，则注册主题。主题样式优先级低于自定义样式。
                if (theme) this.echarts.registerTheme(theme, themeMap[theme]);
                let myChart = this.echarts.init(Dom, theme);
                // 绘制图表
                let option = {};
                // 根据chartType提取配置模板
                if (chartType === 'Line' || chartType === 'Bar') {
                    option = this.makeLineOrBar(config);
                } else if (chartType === 'Pie') {
                    option = this.makePie(config);
                }
                myChart.setOption(option);
                this.chart = myChart;
                window.addEventListener('resize', () => {
                    this.chart.resize();
                });
            });
        },
        makeLineOrBar(config) {
            const { data, chartType, categoryBase } = config;
            // 判断数据的格式类型是否为品类基准。
            if (categoryBase) {
                return this.handleTimeBaseToLine(config);
            }
            // 类目集合 - 用于X轴
            const cols = Object.keys(data);
            // 获取基础配置
            const option = optionsMap[chartType];
            // 设置模板
            const sItemModel = JSON.parse(JSON.stringify(option.series[0]));
            if (config.flipXY) {
                // 翻转X轴和Y轴，默认以X轴为类目轴
                option.xAxis = { type: 'value' };
                option.yAxis = {
                    type: 'category',
                    data: cols,
                };
            } else {
                option.xAxis.data = cols;
            }
            // 配置series模板,写入数据
            const seriesModel = [];
            // 一个类目下的样例个数
            const group = data[cols[0]].map((t) => {
                return t.name;
            });

            group.forEach((g, gIndex) => {
                const valArr = [];
                cols.forEach((col) => {
                    valArr.push(data[col][gIndex].value);
                });

                seriesModel.push(Object.assign({}, sItemModel, { data: valArr, name: g }));
            });
            // 写入数据
            option.series = seriesModel;
            return option;
        },
        makePie(config) {
            // 获取基础配置
            const { data, chartType, categoryBase } = config;
            // 判断数据的格式类型是否为品类基准。
            if (categoryBase) {
                return this.handleTimeBaseToPie(config);
            }
            const option = optionsMap[chartType];
            const cols = Object.keys(data);
            // 一个类目下的样例个数
            const group = data[cols[0]].map((t) => {
                return t.name;
            });
            const seriesArr = [];
            group.forEach((g, gIndex) => {
                let allVal = 0;
                cols.forEach((col) => {
                    let val = data[col][gIndex].value;
                    allVal += val;
                });
                seriesArr.push({
                    name: g,
                    value: allVal,
                });
            });
            option.series[0].data = seriesArr;
            return option;
        },
        handleTimeBaseToLine(config) {
            return config;
        },
        handleTimeBaseToPie(config) {
            return config;
        },
    },
};
</script>

<style lang="scss" scoped>
.chart {
    // width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 15px;
    box-sizing: border-box;
    // margin: 10px;
    box-shadow: 0px 0px 5px #ccc;
}
</style>
